<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户角色编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" href="${ctxPath}/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxPath}/css/public.css" media="all">
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<form class="layui-form" lay-filter="formInfo">

				<input type="hidden" name="userid" id="userid" class="userid layui-input" />

				<div class="layui-row">
					<div class="layui-col-md12">
						<label class="layui-form-label">选择角色<span style="color: red;">*</span></label>
						<div class="layui-input-block">
							<div id="role" class="xm-select-demo"></div>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md6">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="btn-form-submit">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">取消</button>
						</div>
					</div>
				</div>
			</form>

		</div>
	</div>

	<script src="${ctxPath}/lib/layui/layui.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/core.util.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>

	<script type="text/javascript">
		layui.use(['form', 'layer', 'notice', 'xmSelect'], function () {
			var $ = layui.jquery, form = layui.form, layer = layui.layer, notice = layui.notice, xmSelect = layui.xmSelect;

			// 获取详情信息，填充表单
			$("#userid").val(request("userid"));
		
			let userRole;
			// 查询用拥有的角色
			sendAjax("/sys/userRole/querUserRoleByUserId?userId=" + request("userid"), null, function (rest) {
				userRole = rest.data;
			}, "GET");

			//查询所有角色		layVerify: 'required',		角色是否必填
			sendAjax("/sys/role/listAll", null, function (rest) {
				roleXmSel = xmSelect.render({
					el: '#role',
					toolbar: {show: true},
					data: rest.data,
					initValue: userRole,
					prop: {name: 'name', value: 'id'},
				});
				form.render('select');
			});

			//监听提交
			form.on('submit(btn-form-submit)', function (data) {

				sendAjax("/sys/userRole/saveUserRole", data.field, function (rest) {
					notice.msg(rest.msg, {icon: 1});
				}, "GET");

				return false;
			});

		});
	</script>
</body>

</html>